<template>
  <div class="banner-area flex flex--c">
    <swiper
      :modules="[Navigation, Pagination, Scrollbar, A11y, Autoplay]"
      :autoplay="{ delay: 2500, disableOnInteraction: false }"
      :loop="true"
      :slides-per-view="1"
      :space-between="0"
      navigation
      :pagination="{ clickable: true }"
      :scrollbar="{ draggable: true }"
    >
      <swiper-slide v-for="(banner, index) in banners" :key="index">
        <img :src="banner" class="banner-img" />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script lang="ts" setup>
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
import "swiper/swiper.min.css";
import { ref } from "vue";
const banners = ref<Array<string>>([
  // require("@/assets/image/banner1.png"),
  // require("@/assets/image/banner2.jpg"),
  // require("@/assets/image/banner3.png"),
  "http://img.xjlyh.site/2023/09/05/14b0c084c52f48a1913a3e0443c38a63.jpg",
  "http://img.xjlyh.site/2023/09/06/fa565ce3992e4c269a358ad1b6ad6e79.png",
]);
</script>

<style lang="scss" scoped>
.banner-area {
  margin-top: 60px;
  width: 100%;
  padding: 0 10vw;
  .swiper {
    width: 100%;
  }
  .banner-img {
    height: 400px;
    width: 80vw;
  }
}
</style>
